#include('../header.html', {title: '个人信息'})
<style>
  .radio-i {
    color: #0000008f;
    font-weight: normal;
    padding: 0 5px;
  }
</style>
<div class="container cd-container">
  <div class="cd-content">
    <div>
      #include('sideMenu.html', {type: 'set', name: '个人信息'})
    </div>
    <div class="cd-main">
      <div class="cd-main__heading">
        <div class="cd-main__title">
          个人信息
        </div>
      </div>
      <div class="cd-main__body">
        <form id="user-profile-form" class="row cd-row" method="post" novalidate="novalidate">
          <div class="col-md-11">
            <div class="cd-image-upload cd-mr24 cd-mb32">
              <img class="cd-avatar cd-avatar-square cd-avatar-lg" id="profile-avatar" :src="user.icon">
              <div class="image-upload-mask">
                <div class="image-upload-content">
                  <i class="cd-icon cd-icon-camera"></i>
                  修改头像
                </div>
              </div>
              <label class="image-upload-label">
                <input type="file" name="file" class="hidden" accept="image/bmp,image/jpeg,image/png">
              </label>
            </div>

            <div class="form-group cd-form-group cd-form-group-inline cd-form-group-action" id="nickname-form-group">
              <label for="nickname">用户名</label>
              <div class="static-text input-edit__static-dom" v-show="!edit">
                <span class="input-edit__static-text">{{user.username}}</span>
              </div>
              <div class="input-edit__edit-dom" v-show="edit">
                <input data-url="/settings/nickname/check" name="nickname" id="nickname" type="text"
                       class="form-control input-edit__input" v-model="user.username">
              </div>
            </div>
          </div>

          <div class="col-md-5">
            <div class="form-group cd-form-group">
              <label for="profile_truename">真实姓名</label>
              <input v-model="user.name" id="profile_truename" class="form-control">
            </div>
          </div>
          <div class="col-md-5 col-md-offset-1">
            <div class="form-group cd-form-group">
              <label>性别</label>
              <div class="cd-radio-group">
                <label class="radio-i">
                  <input type="radio" v-model="user.sex" :value="0">
                  男
                </label>
                <label class="radio-i">
                  <input type="radio" v-model="user.sex" :value="1">
                  女
                </label>
              </div>
            </div>
          </div>
          <div class="col-md-11">
            <div class="form-group cd-form-group">
              <label for="profile_about">自我介绍</label>
              <textarea rows="8" id="profile_about" class="form-control" v-model="user.intro"></textarea>
            </div>
          </div>
          <div class="col-md-5">
            <div class="form-group cd-form-group">
              <label for="profile_title">头衔</label>
              <input v-model="user.title" id="profile_title" class="form-control">
            </div>
          </div>
          <div class="col-md-5 col-md-offset-1">
            <div class="form-group cd-form-group">
              <label for="profile_signature">个人签名</label>
              <input v-model="user.sign" id="profile_signature" class="form-control">
            </div>
          </div>
          #--
          <div class="col-md-5">
            <div class="form-group cd-form-group">
              <label for="profile_company">公司</label>
              <input type="text" id="profile_company" name="profile[company]" class="form-control" value="">
            </div>
          </div>
          <div class="col-md-5  col-md-offset-1">
            <div class="form-group cd-form-group">
              <label for="profile_job">职业</label>
              <input type="text" id="profile_job" name="profile[job]" class="form-control" value="">
            </div>
          </div>
          <div class="col-md-5">
            <div class="form-group cd-form-group">
              <label for="profile_site">个人空间</label>
              <input type="text" id="profile_site" name="profile[site]" class="form-control" value=""
                     placeholder="http://">
            </div>
          </div>
          <div class="col-md-5  col-md-offset-1">
            <div class="form-group cd-form-group">
              <label for="weibo">微博</label>
              <input type="text" id="weibo" name="profile[weibo]" class="form-control" value="" placeholder="http://">
              <input class="hidden" type="text" name="profile[isWeiboPublic]" value="1">
              <div class="help-block">微博、微信、QQ信息将会展示在您的个人主页</div>
            </div>
          </div>
          --#
          <div class="col-md-5">
            <div class="form-group cd-form-group">
              <label for="profile_weixin">电话</label>
              <input maxlength="11" v-model="user.tel" id="profile_weixin" class="form-control">
            </div>
          </div>
          <div class="col-md-5  col-md-offset-1">
            <div class="form-group cd-form-group">
              <label for="profile_qq">邮箱</label>
              <span class="input-edit__static-text form-control" id="profile_qq">{{user.email}}</span>
            </div>
          </div>
          <div class="col-md-11">
            <button type="button" class="btn cd-btn cd-btn-primary cd-btn-lg" @click="updateUser">保存
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var userVm = new Vue({
    el: '#user-profile-form',
    data: {
      edit: false,
      user: {
        id: '${user.id}',
        name: '${user.name}',
        username: '${user.username}',
        intro: '${user.intro}',
        sex: '${user.sex}',
        title: '${user.title}',
        sign: '${user.sign}',
        tel: '${user.tel}',
        email: '${user.email}',
        icon: '${user.icon}' || '/static/img/pk.jpg'
      }
    },
    methods: {
      updateUser: function () {
        if (this.formCheck()) {
          var self = this;
          var load = layer.load(1);
          $.post('/user/updateUser', {
            id: self.user.id,
            name: self.user.name,
            intro: self.user.intro,
            sex: self.user.sex,
            title: self.user.title,
            sign: self.user.sign,
            tel: self.user.tel
          }, function (data) {
            layer.close(load);
            if (data.success) {
              layer.msg('修改成功!', {
                time: 1500, icon: 6
              })
            }
          });
        }
      },
      formCheck: function () {
        if (!(/^1[34578]\d{9}$/.test(this.user.tel))) {
          layer.msg('电话号码不合法！', {icon: 5, time: 1200});
          return false;
        }
        return true;
      },
      editName: function () {
        this.edit = true;
      },
      cancelEdit: function () {
        this.edit = false;
      },
      changeIcon: function () {
        if (this.user.icon !== this.icon) {
          var self = this;
          var image = new Image();
          image.src = this.user.icon;
          image.onload = function (ev) {
            var min = image.width;
            if (image.height < min) min = image.height;

            var canvas = document.createElement('canvas');
            canvas.width = min;
            canvas.height = min;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0, min, min, 0, 0, min, min);
            canvas.toBlob(function (blob) {
              var fd = new FormData();
              fd.append('file', blob, 'icon.png');
              fd.append('type', 'user_icon');
              var xhr = new XMLHttpRequest();
              xhr.open('post', '/file/upload', true);
              xhr.onload = function () {
                var json = JSON.parse(xhr.responseText);
                if (json.success) {
                  self.user.icon = json.payload.path;
                  $.post('/user/updateUser', {id: self.user.id, icon: self.user.icon}, function (data) {
                    if (data.success) {
                      console.log("头像修改成功！");
                    }
                  });
                }
              };
              xhr.send(fd);
            });
          }
        }
      }
    },
    mounted: function () {
      var self = this;
      $('input[name=file]').on('change', function (e) {
        var file = e.target.files[0];
        self.user.icon = URL.createObjectURL(file);
        self.changeIcon();
      });
    }
  });
</script>
#include('../footer.html')
